<template>
    <div class="inspector-meeting-signIn-box">
        <a-tabs v-model="defaultActiveKey" v-if="!submitSuccess">
            <a-tab-pane :key="1" tab="无利益冲突声明" disabled></a-tab-pane>
            <a-tab-pane :key="2" tab="审评员承诺书" disabled></a-tab-pane>
            <a-tab-pane :key="3" tab="技术审评纪律" disabled></a-tab-pane>
            
        </a-tabs>
        <div class="previous-step-box" @click="previousStepClick(defaultActiveKey)" v-if="!submitSuccess && defaultActiveKey !== 1">
            切换上一个
            <a-icon class="double-icon" type="double-left" />
        </div>
        <div class="inspector-meeting-tab-item no-conflicts-of-interest-box" v-if="!submitSuccess && defaultActiveKey == 1">
            <div v-html="htmlContent"></div>
            <p style="text-indent: 28pt;" class="select-p-box">
                <a-checkbox @change="checkboxChange('wlysmsz',fstateData.wlysmsz)" :checked="fstateData.wlysmsz"></a-checkbox>
                <span style="font-size: 16px; font-family: 宋体;">
                    
                    本人保证以上声明全部属实，继续参加本次技术审评工作。如有不实，愿承担因此导致的一切后果。
                </span>
            </p>
            <p style="text-indent: 28pt;" class="select-p-box">
                <a-checkbox @change="checkboxChange('wlylyct',fstateData.wlylyct)" :checked="fstateData.wlylyct"></a-checkbox>
                <span style="font-size: 16px; font-family: 宋体;">
                    本人声明与被审评单位有利益冲突关系，主动提出退出本次技术审评工作。
                </span>
            </p>
            <p style="text-indent: 28pt;" class="select-p-box">
                <a-checkbox @change="checkboxChange('wlysfczlygx',fstateData.wlysfczlygx)" :checked="fstateData.wlysfczlygx"></a-checkbox>
                <span style="font-size: 16px; font-family: 宋体;">
                    本人声明与被审评单位有可能存在利益关系，建议提交审查中心审议是否可继续参加本次技术审评工作。
                </span>
            </p>
            <p style="text-indent: 28pt;">
                <span style="font-size: 16px; font-family: 宋体;">
                    可能存在的利益关系：
                    <a-textarea
                        v-model="fstateData.wlyczlygx"
                        placeholder="请输入可能存在的利益关系"
                        :auto-size="{ minRows: 3, maxRows: 100 }"
                    />
                </span>
            </p>
            
        </div>
        <div class="inspector-meeting-tab-item" v-if="!submitSuccess && defaultActiveKey == 2">
            <div v-html="htmlContent2"></div>
        </div>
        <div class="inspector-meeting-tab-item" v-if="!submitSuccess && defaultActiveKey == 3">
            <div v-html="htmlContent3"></div>
        </div>
        <div class="bottom-btn" v-if="!submitSuccess">
            <a-button type="primary" block @click="nextStepClick(defaultActiveKey)">{{defaultActiveKey == 3?'已同意以上信息，去签名':'已同意以上信息，切换下一个'}}</a-button>
        </div>
        <div v-if="submitSuccess">
            <a-result status="success" title="已完成！"></a-result>
            <div class="bottom-btn blue-btn1" v-if="hpState && queryData.fhylx == '末次会议'" style="text-align: center;" >
                <a-button v-if="hpState == '待评价'" type="primary" block @click="toEvaluateClick()">审评员评价</a-button>
                <span v-else style="color: #1ab394;font-size: 16px;font-weight: 600;" >已评价</span>
            </div>
        </div>
        <a-modal
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="visible = false"
            wrapClassName="qz-inspector-meeting-modal-box"
        >
            <template slot="footer">
                <div style="display: flex;justify-content: center;">
                    <a-button style="margin-right: 15px;background-color: #fe8939 !important;border-color: #fe8939 !important;" class="blue-btn" type="primary" @click="handleOk()">提交并签名</a-button>
                    <a-button @click="visible = false">取消</a-button>
                </div>
            </template>
            <div>
                <a-tabs v-model="tcActiveKey" @change="qzChange">
                    <a-tab-pane :key="1" tab="调用签名库">
                        <div style="display: flex;justify-content: center;">
                            <img v-if="signature" :src="signature" alt="" style="width: 172px;height: 80px;border: 1px solid #d9d9d9">
                            <span v-else>签名库为空，请先到签名库维护签字信息！</span>
                        </div>
                        
                    </a-tab-pane>
                    <a-tab-pane :key="2" :tab="signature?'重新制作签名':'制作签名'">
                        <div @touchmove.prevent="preventScroll">
                            <canvas ref="canvas" @touchstart="startDrawing" @touchmove="draw" @touchend="stopDrawing" @touchcancel="stopDrawing"></canvas>
                        </div>
                        <div style="display: flex;justify-content: space-between;">
                            <a-button class="blue-btn" type="primary" @click="saveSignature()">生成签名并更新到签字库</a-button>
                            <a-button class="blue-btn" type="primary" @click="clearCanvas()">重签</a-button>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </a-modal>
    </div>
</template>
<script>
import {
    spcySqsxXpjlqueryWlyctsmContent,
    spcySqsxXpjlqueryJcycnsContent,
    spcySqsxXpjlqueryXcjcjlContent,
    spcySqsxXpjlhySubmit,
    jcylxdjcjgetUserSignPhotoLink,
    jcylxdjcjuploadMyQm,
    spcySqsxXpjlqueryRcJxDbList,
} from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            queryData:{},
            htmlContent:'',
            htmlContent2:'',
            htmlContent3:'',
            fstateData:{
                wlysmsz:false,
                wlylyct:false,
                wlysfczlygx:false,
            },
            defaultActiveKey:1,
            submitSuccess:false,
            visible:false,
            confirmLoading:false,
            tcActiveKey:1,
            signature:'',
            drawing:false,
            lastX: 0,
            lastY: 0,
            context: null,
            isDraw: false,
            hpState:'',
        }
    },
    watch:{

    },
    mounted(){
        document.title = 'xx“技术审评”审评查验信息一体化智慧管理系统'
        this.queryData = JSON.parse(this.$route.query.obj)
        this.getFileData(this.queryData)
        this.getState()
    },
    methods:{
        getState(){
            let data = {
                sqsxid:this.queryData.sqsxid,
                fuserid:this.queryData.fuserid,
            }
            spcySqsxXpjlqueryRcJxDbList(data).then(res=>{
                if(res.code == 200){
                    this.hpState = res.result.hpState
                }else{
                    this.hpState = ''
                }
            })
        },
        preventScroll(event){
          if (!this.$refs.canvas.contains(event.target)) {
            // 如果不是画布上的事件，则阻止滚动
            event.preventDefault();
          }
        },
        getFileData(obj){
            
            spcySqsxXpjlqueryWlyctsmContent({sqsxid:obj.sqsxid}).then(res=>{
                if(res.code == 200){
                    //console.log('获取无利益冲突声明',res.result)
                    this.htmlContent = res.result
                }else{

                }
            })
            spcySqsxXpjlqueryJcycnsContent({sqsxid:obj.sqsxid}).then(res=>{
                if(res.code == 200){
                    //console.log('技术审评审评员承诺书内容',res)
                    this.htmlContent2 = res.result
                }else{

                }
            })
            spcySqsxXpjlqueryXcjcjlContent({sqsxid:obj.sqsxid}).then(res=>{
                if(res.code == 200){
                    //console.log('技术审评纪律内容',res)
                    this.htmlContent3 = res.result
                }else{

                }
            })
            this.getSignLink()
        },
        getSignLink(){
            jcylxdjcjgetUserSignPhotoLink({id:this.queryData.fuserid}).then(res=>{
                if(res.code == 200){//获取签字
                    //console.log('获取签字',res.result.signLink)
                    this.signature = res.result.signLink
                }else{
                    this.signature = ''
                }
            })
        },
        checkboxChange(key,val){
            this.fstateData[key] = !val
            if(key == 'wlysmsz' && !val){
                this.fstateData.wlylyct = false
                this.fstateData.wlysfczlygx = false

            }
            if(key == 'wlylyct' && !val){
                this.fstateData.wlysmsz = false
                this.fstateData.wlysfczlygx = false

            }
            if(key == 'wlysfczlygx' && !val){
                this.fstateData.wlylyct = false
                this.fstateData.wlysmsz = false

            }
            if(key == 'wlysmsz' && !val && !this.fstateData.wlyczlygx){
                this.fstateData.wlyczlygx = '无'
            }else{
                this.fstateData.wlyczlygx = ''
            }
        },
        previousStepClick(val){
            this.defaultActiveKey = val-1
        },
        nextStepClick(val){
            if(val == 1){
                if((this.fstateData.wlysmsz && this.fstateData.wlyczlygx) || (this.fstateData.wlylyct && this.fstateData.wlyczlygx) || (this.fstateData.wlysfczlygx && this.fstateData.wlyczlygx)){
                    this.defaultActiveKey = 2
                }else{
                    this.$message.warning('请先完成必填项，在进行下一步操作')
                }
            }else if(val == 2){
                this.defaultActiveKey = 3
            }else if(val == 3){//提交
                this.visible = true
            }
        },
        toEvaluateClick(){//去评价
            let data = {
                sqsxid:this.queryData.sqsxid,
                fuserid:this.queryData.fuserid,
            }
            window.location.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL+process.env.BASE_URL+ 'onSiteInspectionCheckInToEvaluate?obj='+JSON.stringify(data)
        },
        qzChange(val){
            if(val == 2){
                let that = this
                this.$nextTick(()=> {
                    setTimeout(()=>{
                        that.context = this.$refs.canvas.getContext('2d');
                        that.resizeCanvas()
                    },200)
                })
            }
        },
        resizeCanvas() {
            const canvas = this.$refs.canvas;
            // 设置canvas宽度为屏幕宽度的一定比例，例如80%
            // canvas.width = window.innerWidth * 0.8;
            canvas.width = Math.ceil(window.innerWidth - 50);
            // 设置canvas高度为屏幕高度的一定比例，例如80%
            // canvas.height = window.innerHeight * 0.5;
            canvas.height = Math.ceil((window.innerWidth - 50)/2);
        },
        startDrawing(event) {
            this.drawing = true;
            const rect = this.$refs.canvas.getBoundingClientRect();
            // 获取触摸点的页面坐标
            const touch = event.touches[0];
            // 转换为canvas的局部坐标
            this.lastX = touch.clientX - rect.left;
            this.lastY = touch.clientY - rect.top;
        },
        draw(event) {
            if (!this.drawing) return;
            const rect = this.$refs.canvas.getBoundingClientRect();
            // 获取触摸点的页面坐标
            const touch = event.touches[0];
            // 转换为canvas的局部坐标
            const x = touch.clientX - rect.left;
            const y = touch.clientY - rect.top;
            this.context.lineWidth = 4; // 设置画线的粗细（这里示意设置为5）
            this.context.strokeStyle = 'black'; // 设置画线的颜色
            // 在canvas上绘制线条
            this.context.beginPath();
            this.context.moveTo(this.lastX, this.lastY);
            this.context.lineTo(x, y);
            this.context.stroke();
            // 更新上一个点的坐标
            [this.lastX, this.lastY] = [x, y];
            this.isDraw = true
        },
        stopDrawing() {
            this.drawing = false;
        },
        clearCanvas() {
            // //console.log('获取路由',this.$route.query.id)
            this.context.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
            this.drawing = false;
            this.lastX = 0;
            this.lastY = 0;
            this.isDraw = false
        },
        saveSignature() {
            let that = this
            this.$confirm({
                title:'您确认要生成签名并更新到签字库吗？',
                onOk() {
                    const canvas = that.$refs.canvas;
                    // 获取canvas元素
                    const dataUrl = canvas.toDataURL()

                    // 创建新的image元素
                    const image = new Image();
                    image.src = dataUrl
                    // 在加载完成时触发事件处理函数
                    image.onload = function() {
                        //console.log('我进不到这里')
                        // 创建新的canvas元素
                        const resizedCanvas = document.createElement('canvas');

                        // 设置resizedCanvas的宽度和高度
                        resizedCanvas.width = 172; // 自定义目标尺寸
                        resizedCanvas.height = 80;
                        // //console.log(image)

                        // 在resizedCanvas上绘制原始图像
                        resizedCanvas.getContext('2d').drawImage(image, 0, 0, resizedCanvas.width, resizedCanvas.height);

                        // 将resizedCanvas转换为Blob对象
                        const base64String  = resizedCanvas.toDataURL("image/png");
                        const base64Data = base64String.split(',')[1];

                        // 将Base64字符串转换为ArrayBuffer
                        const byteCharacters = atob(base64Data);
                        const byteArrays = [];

                        for (let offset = 0; offset < byteCharacters.length; offset += 512) {
                        const slice = byteCharacters.slice(offset, offset + 512);

                        const byteNumbers = new Array(slice.length);
                        for (let i = 0; i < slice.length; i++) {
                            byteNumbers[i] = slice.charCodeAt(i);
                        }

                        const byteArray = new Uint8Array(byteNumbers);
                        byteArrays.push(byteArray);
                        }

                        const blob = new Blob(byteArrays, { type: 'image/png' });

                        // 现在你有一个Blob对象，你可以将其视为File对象
                        const file = new File([blob], 'image.png', { type: 'image/png' });
                        //console.log(file);
                        const fileData = new FormData();
                        fileData.append("file",file);
                        fileData.append("id",that.queryData.fuserid);

                        jcylxdjcjuploadMyQm(fileData).then(res=>{
                            if(res.code ==  200){
                                that.getSignLink()
                                that.$message.success(res.message)
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    };
                }
            })

        },
        handleOk(){
            if(!this.signature){
                this.$message.warning('当前签名库暂无签名，请重新制作签名！')
                return
            }
            let that = this
            this.$confirm({
                title:'您确认要提交并签字吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    spcySqsxXpjlhySubmit({...that.fstateData,fuserid:that.queryData.fuserid,id:that.queryData.id,}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.submitSuccess = true
                            that.visible = false
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        }
    }
}
</script>
<style lang="less">
.inspector-meeting-signIn-box{
    .previous-step-box{
        width: 40%;
        height: 40px;
        box-shadow: 0px 1px 6px 2px #e4d9d9;
        border-left: 0;
        position: fixed;
        left: 0px;
        top: 200px;
        background-color: #fff;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        color: #fe8939;
        font-size: 18px;
        line-height: 40px;
        text-align: center;
        .double-icon{
            color: rgba(0, 0, 0, 0.35);
        }
    }
    .inspector-meeting-tab-item{
        padding: 10px;
        color: #000 !important;
        height: calc(100vh - 47px - 61px);
        overflow-y: auto;
    }
    .no-conflicts-of-interest-box{
        .select-p-box{
            .ant-checkbox-wrapper{
                width: 22px;
                .ant-checkbox{
                    left: -40px;
                }
                .ant-checkbox-inner{
                    width: 20px;
                    height: 20px;
                }
                
            }
        }
        // .ant-input{
        //     border: 1px solid #000;
        // }
    }
    .ant-tabs-nav .ant-tabs-tab{
        margin: 0 ;
        padding: 12px 11px;
    }
    .ant-tabs-nav .ant-tabs-tab:hover{
        color: rgba(0, 0, 0, 0.25);
    }
    .ant-tabs-nav .ant-tabs-tab-active{
        color: #fe8939;
    }
    .ant-tabs-ink-bar{
        background-color:#fe8939;
    }
    .ant-tabs-tab{
        font-weight: 600;
        font-size: 16px !important;
    }
    .bottom-btn{
        // position: fixed;
        // bottom: 0px;
        width: 100%;
        background-color: #fff;
        .ant-btn{
            font-size: 18px;
            height: 45px !important;
            border-radius: 22.5px;
            background-color: #fe8939;
            border-color: #fe8939;
        }
        
    }
    .blue-btn1{
        .ant-btn{
            font-size: 18px;
            height: 45px !important;
            border-radius: 22.5px;
            background-color: #5ca3e5;
            border-color: #5ca3e5;
        }
    }
    
}
.qz-inspector-meeting-modal-box{
    .ant-modal-close-x{
        color: #353232 !important;
    }
    .ant-modal-body{
        padding: 8px;
        padding-top: 24px
    }
    canvas {
        border: 1px solid #000;
        /* width: 100%;
        height: auto; */
    }
    .ant-tabs-tab{
        font-size: 16px;
        font-weight: 600;
    }
    .ant-tabs-nav .ant-tabs-tab-active,.ant-tabs-nav .ant-tabs-tab:active,.ant-tabs-nav .ant-tabs-tab:hover{
        color: #fe8939;
    }
    .ant-tabs-ink-bar{
        background-color:#fe8939;
    }
}
</style>